<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form" v-if="headerShow" style="margin-top: 20px">
        <a-form size="small" :model="query" layout="inline">
          <a-form-item label="选择日期">
            <el-date-picker
              v-model="query.date"
              type="date"
              placeholder="请选择日期"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
            />
          </a-form-item>
        </a-form>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar :items="['查询']" @select="selectHandler"> </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <div style="height: 100%">
        <a-tabs   :lazy-load="true" type="card" justify @change="tabsChange" :default-active-key="activeKey">
          <a-tab-pane title="产量" key="1">
            <el-table
              :data="tableData"
              style="width: 100%"
              :key="Math.random()"
              height="100%"
              :span-method="objectSpanMethod"
              border
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                v-for="(item, index) in tableHeader"
                :key="index"
              ></el-table-column>
            </el-table>
          </a-tab-pane>
          <a-tab-pane title="质量" key="2">
            <el-table
              :data="tableData1"
              style="width: 100%"
              :key="Math.random()"
              height="100%"
              :span-method="objectSpanMethod"
              border
              align="center"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column
                :prop="item.prop"
                :label="item.label"
                v-for="(item, index) in tableHeader"
                :key="index"
              ></el-table-column>
            </el-table>
          </a-tab-pane>
        </a-tabs>
      </div>
    </template>
  </pageTabelLayout>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import { tableData, tableData1 } from '@/views/biReport/index'
const query = reactive<any>({ date: '' })
const activeKey = ref<any>('1')
let tableHeader = reactive<any>([
  {
    prop: 'birth',
    label: '名称',
  },
  {
    prop: 'name',
    label: '名称',
  },
  {
    prop: 'phone',
    label: '名称/数值',
  },
  {
    prop: 'province',
    label: '名称/数值',
  },
  {
    prop: 'city',
    label: '名称/数值',
  },
  {
    prop: 'address',
    label: '名称/数值',
  },
])
const headerShow = ref<boolean>(true)
const spanMap = reactive<any>({})
const mergedColumns = reactive<any>(['birth', 'name', 'phone', 'province', 'city', 'address'])
const selectHandler = () => {}
const getSpanArr = (data: any) => {
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      mergedColumns.forEach((column: any) => {
        spanMap[column] = {
          spanArr: [1],
          pos: 0,
        }
      })
    } else {
      mergedColumns.forEach((column: any) => {
        if (data[i][column] === data[i - 1][column]) {
          spanMap[column].spanArr[spanMap[column].pos] += 1
          spanMap[column].spanArr.push(0)
        } else {
          spanMap[column].spanArr.push(1)
          spanMap[column].pos = i
        }
      })
    }
  }
}
const objectSpanMethod = ({ column, rowIndex, row }: any) => {
  // console.log(row)
  if (spanMap[column.property]) {
    const _row = spanMap[column.property].spanArr[rowIndex]
    const _col = _row > 0 ? 1 : 0
    return {
      rowspan: _row,
      colspan: _col,
    }
  }
}
const tabsChange = (e: string | number) => {
  if (e == '1') {
    getSpanArr(tableData)
  }
  if (e == '2') {
    getSpanArr(tableData1)
  }
}
getSpanArr(tableData)
</script>
<style scoped>
:deep(.el-table .cell){
  color: #000;
}
</style>
